import React, { Component } from 'react';
import { NavBar, Swiper } from 'antd-mobile'


import { GoodGoodinfo } from "../api/details"
// import {  } from 'antd-mobile-icons'

import "../styles/details/swiper.scss"


class Details extends Component {
    constructor() {
        super()
        this.state = {
            swperlist: [""],//轮播组件一开始是空的话会警告
            price: "",
            name: "",
            description: "",
        }
    }

    async componentDidMount() {
        console.log("从全部商品页传过来的id" + this.props.location.state.id);
        var res = await GoodGoodinfo({ goodid: this.props.location.state.id })
        console.log(res.data.goodinfo);
        this.setState({
            swperlist: res.data.goodinfo.pics,
            price: res.data.goodinfo.salesPrice.value,
            name: res.data.goodinfo.name,
            description: res.data.goodinfo.description
        })
    }

    myback() {
        console.log(this.props.history);
        this.props.history.goBack()
    }


    render() {
        return (
            <div className='details'>
                <NavBar back='返回' onBack={() => { this.myback() }}>
                    详情页
                </NavBar>
                {/* ----------------------------top----------------------------------------------- */}
                <Swiper className='swiper' autoplay autoplayInterval={3000} loop>
                    {
                        this.state.swperlist.map((item, index) => {
                            return (
                                <Swiper.Item key={index}>
                                    <div onClick={() => { }} className="swiper-img">
                                        <img src={item} alt="" />
                                    </div>
                                </Swiper.Item>
                            )
                        })
                    }
                </Swiper>
                {/* ------------------------------swiper-------------------------------------------- */}
                <div className='text'>
                    <p className='price'>
                        活动价¥<span>{this.state.price}</span>
                    </p>
                    <p className='name'>
                        {this.state.name}
                    </p>
                    <p className='description'>
                        {this.state.description}
                    </p>
                </div>
                {/* ----------------------------------text------------------------------------ */}



            </div>
        );
    }
}

export default Details;